// 入口函数
$(function () {
  // 1. 初始化文章分类列表
  //    后面要用，添加/修改/删除完成后都要重新渲染

  //调用函数
  initArtCateList()

  // 1.1 封装 获取网络数据，渲染表格
  function initArtCateList () {
    axios({
      method: 'get',
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      //   console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 1.2 定义数组，遍历元素，渲染
      let arr = []
      res.data.data.forEach(ele => {
        if (ele.Id < 0) return
        arr.push(`
          <tr>
            <td>${ele.Id}</td>
            <td>${ele.name}</td>
            <td>${ele.alias}</td>
            <td>
                <button data-id="${ele.Id}" class="btn-edit layui-btn  layui-btn-xs">修改</button>
                <button data-id="${ele.Id}" class="btn-dele layui-btn  layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `)
      })

      // 1.3 循环结束之后，渲染页面，赋值
      $('tbody')
        .empty()
        .html(arr.join(''))
    })
  }

  // 2. 点击按钮，弹出添加类别对话框
  // 2.1 定义一个全局变量，接收open()的索引值，将来用于关闭对话框
  let indexAdd = 0
  $('#addBtn').on('click', function () {
    indexAdd = layui.layer.open({
      type: 1,
      title: '添加文章分类',
      area: ['500px', '260px'],
      // 将来 content 里面要放form表单
      content: `
        <form id="addForm" class="layui-form" action="">
            <!-- 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 分类别名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 确认添加 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>`
    })
  })

  // 3. 确认添加文章分类 - 后添加的动态元素，需要使用事件委托
  $('body').on('submit', '#addForm', function (e) {
    // 3.1 阻止表单默认行为
    e.preventDefault()

    // 3.2 发起ajax
    axios({
      method: 'post',
      url: '/my/article/addcates',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      //   console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 3.3 成功提示，初始化文章分类
      layui.layer.msg('恭喜您，添加文章类别成功！')
      initArtCateList()

      // 3.4 关闭对话框
      layui.layer.close(indexAdd)
    })
  })

  // 4. 修改分类 -  渲染弹出框要修改的数据
  // 4.1 定义一个全局变量，接收弹出框的索引值，将来用于关闭对话框
  let indexEdit = 0
  $('tbody').on('click', '.btn-edit', function () {
    // 4.1 点击编辑按钮做两件事  1.弹出层
    indexEdit = layui.layer.open({
      type: 1,
      title: '修改文章分类',
      area: ['500px', '260px'],
      // 将来 content 里面要放form表单
      content: `
        <form lay-filter="eaitForm" id="eaitForm" class="layui-form" action="">
            <!-- 隐藏域，填充Id值，将来修改数据使用 -->
            <input type="hidden" name="Id">
            <!-- 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 分类别名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 确认修改 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                </div>
            </div>
        </form>`
    })

    // 4.2 点击编辑按钮做两件事  2.赋值
    // （获取数据，和渲染数据，要写到 .btn-eait 的点击事件里面）
    let id = $(this).attr('data-id')

    // 4.3 发送ajax
    axios({
      method: 'get',
      // /:id 动态参数（路由参数、URL参数）
      // 特点： / 不能省略  : 一定要去除   id使动态变化的
      url: '/my/article/cates/' + id
    }).then(res => {
      //成功回调
      // console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 4.4 使用layui方法表单赋值，渲染页面
      layui.form.val('eaitForm', res.data.data)
    })
  })

  // 5. 修改文章分类
  $('body').on('submit', '#eaitForm', function (e) {
    // 5.1 阻止表单默认行为
    e.preventDefault()

    // 5.2 发起ajax
    axios({
      method: 'post',
      url: '/my/article/updatecate',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      //   console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 5.3 成功提示，初始化文章分类
      layui.layer.msg('恭喜您，修改文章类别成功！')
      initArtCateList()

      // 5.4 关闭对话框
      layui.layer.close(indexEdit)
    })
  })

  // 6. 删除功能
  $('tbody').on('click', '.btn-dele', function () {
    // 6.1 获取自定义属性值
    let id = $(this).attr('data-id')
    // console.log(id)

    // 6.2 弹出层 + 发送ajax
    layui.layer.confirm('确认删除吗？', { icon: 3, title: '提示' }, function (
      index
    ) {
      // 6.2.1 发送ajax
      axios({
        method: 'get',
        // /:id 动态参数（路由参数、URL参数）
        // 特点： / 不能省略  : 一定要去除   id使动态变化的
        url: '/my/article/deletecate/' + id
      }).then(res => {
        //成功回调
        // console.log(res)

        if (res.data.status != 0) {
          return layui.layer.msg(res.data.message)
        }

        // 6.2.2 成功提示 + 初始化文章分类列表
        layui.layer.msg('恭喜您，删除文章类别成功！')
        initArtCateList()
      })
      // 关闭询问框
      layer.close(index)
    })
  })
})
